$m-dropdown-min-width: 300px;

.m-dropdown {
  position: relative;
  width: fit-content;

  &-list {
    list-style: none;
    padding: 0;
    margin-top: 0.25rem;
    margin-bottom: 0;

    &-item {
      padding: 0.5rem;
      cursor: pointer;

      &:hover {
        background-color: var(--light);
      }
    }

    &-title {
      border-bottom: solid 1px var(--secondary);
      padding: 1rem;
      text-align: center;
    }

    &-container {
      min-width: $m-dropdown-min-width;
      background-color: var(--white);
      position: absolute;
      display: none;
      z-index: 2;
      border: none;
      box-shadow: 0 2px 4px #0000008a;

      &.left {
        left: 0;

        & > * {
          left: 0;
        }
      }

      &.right {
        right: 0;

        & > * {
          right: 0;
        }
      }
    }
  }

  &.show {
    .m-dropdown {
      &-button {
        & .fa {
          transform: rotateZ(-180deg);
        }
      }

      &-list {
        &-container {
          display: block;
        }
      }
    }
  }
}
